<!-- 悬浮按钮 -->
<template>
	<view class="fab-btn" @click="callPhone">
		<movable-area class="movableArea ">
			<movable-view class="movableView" x="600rpx" :y="suspensionPosition+'rpx'" :direction="direction" >
				<!-- 左图标 右文字 -->
				<view :class="iconTextDirection">
					<image :src="icon" mode="aspectFit"></image>
					<text>{{name}}</text>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default{
		props: {
			name: {
				type: String,
				default: ''
			},
			icon:{
				type:String,
				default:''
			},
			tel:{
				type:String,
				default:''
			},
			// 图标文字排版
			iconTextDirection:{
				type: String,
				default: 'horizontal' // vertical、horizontal
			},
			// 悬浮方式
			direction:{
				type: String,
				default: 'vertical'  // all、vertical、horizontal、none
			},
			// 悬浮位置
			suspensionPosition:{
				type: Number,
				default:500
			}
		},
		data() {
			return {
				customerService:uni.getStorageSync('customerService')
			}
		},
		methods:{
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: this.tel || this.customerService
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .fab-btn{
	// 	position: fixed;
	// 	top: 500rpx;
	// 	right: 0;
	// 	width: 200rpx;
	// 	height: 97rpx;
	// 	background-color: $color-primary;
	// 	color: $color-white;
	// 	border-radius: 49rpx 0 0 49rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;
	// }
	image{
		width: 60rpx;
		height: 60rpx;
		margin-left: 15rpx;
	}
	text{
		width: 80rpx;
		font-size: 30rpx;
	}
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80%;
		pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
		margin-top: 132rpx;
		.movableView {
			pointer-events: auto;//可以点击
			width: 200rpx;
			height: 97rpx;
			border-radius: 49rpx 0 0 49rpx;
		}
		.horizontal{
			width: 200rpx;
			height: 97rpx;
			background-color: $color-primary;
			color: $color-white;
			border-radius: 49rpx 0 0 49rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.vertical{
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			image{
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
			}
			text{
				position: absolute;
				left: 50rpx;
				bottom: -30rpx;
				width: 112rpx;
				padding: 8rpx 16rpx;
				border-radius:68rpx;
				font-size: 20rpx;
				background-color: #FD5835;
				color: $color-white;
			}
		}
	}
</style>
